<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/element-ui/2.0.9/theme-chalk/index.css" rel="stylesheet">
    <style>
        .headerRowStyle th, .headerRowStyle tr {
            background-color: rgb(202, 229, 255)
        }

        .el-table .headerRowStyle {
            background-color: rgb(202, 229, 255) !important;
        }

    </style>
</head>
<body>
<div id="app">
    <template>
        <el-form :model="param" :inline="true">
            <!--<el-form-item>-->
                <!--<el-button type="success" plain @click="createCar">新建</el-button>-->
            <!--</el-form-item>-->
            <el-form-item label="用户姓名">
                <el-input v-model="param.name" placeholder="用户姓名"></el-input>
            </el-form-item>

            <el-form-item label="用户名">
                <el-input v-model="param.userName" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" round @click="query">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData.list" border highlight-current-row fit stripe
                  style="width: 100%;" :header-row-class-name="tableStyleFun('headerRowStyle')">
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column label="用户姓名" width="180" prop="name">
            </el-table-column>
            <el-table-column label="用户名" width="180" prop="userName">
            </el-table-column>
            <el-table-column label="手机号" width="180" prop="phone">
            </el-table-column>
            <el-table-column label="密码" width="180" prop="password">
            </el-table-column>
            <el-table-column label="性别" width="180" prop="sex">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="tableData.pageNumber"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="tableData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.totalRow">
        </el-pagination>


        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
            <el-form :model="newCustomer" label-width="80px">
                <input type="hidden" v-model="newCustomer.pk_id" id="pk_id">
                <el-form-item label="姓名">
                    <el-input v-model="newCustomer.name"></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="newCustomer.userName"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="newCustomer.phone"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="newCustomer.password"></el-input>
                </el-form-item>

                <el-form-item label="性别">
                    <el-select v-model="newCustomer.sex">
                        <el-option lable="男" value="1"></el-option>
                        <el-option lable="女" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = 0">取 消</el-button>
                <el-button v-if="dialogVisible==1" type="primary" @click="createConfirm()">确 定</el-button>
            </div>
        </el-dialog>

    </template>
</div>
<script src="http://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script src="http://cdn.bootcss.com/element-ui/2.0.8/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
<script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script src="/js/common.js"></script>
<script src="userIndex.js"></script>
</body>
</html>